<template>
	<view class="">
		<view class="" style="position: relative;">
			<view class="img-wrap">
				<image style="width: 750rpx;height: 432rpx;"
					src="https://sz.vvv5g.com/assets/img/wxImg/chengwufuwushang.png" mode=""></image>
			</view>
			<view class="" style="position: absolute;top: 0;">
				<view class="" :style="'height:'+navBarInfo.statusBarHeight+'px;'">

				</view>
				<view class="flex align-center justify-end"
					:style="'height:'+navBarInfo.navBarHeight+'px;width:'+navBarInfo.navBarWidth+'px;'">
					<view class="flex-1">
						<view @click="goBack" class="nav-icon" style="">
						
						</view>
					</view>
					<view class="text-overflow1 flex align-center justify-center" style="font-size: 32rpx;color: #333;"
						:style="'width:'+navBarInfo.navBarContentWidth+'px;'">
						成为区域服务商
					</view>
				</view>
			</view>
		</view>
		<view class=""
			style="margin:-48rpx 32rpx 68rpx 32rpx;padding: 16rpx 32rpx;background: #fff;border-radius: 24rpx;border: 2rpx solid rgba(0, 0, 0, 0.1);position: relative;">
			<view @click="choose(0)" class="flex align-center"
				style="padding: 26rpx 0;border-bottom: 2rpx solid #f4f4f4;">
				<view class="" style="width: 112rpx;margin-right: 28rpx;font-size: 28rpx;color: #333;">
					申请区域
				</view>
				<input v-model="area" disabled class="flex-1" type="text" placeholder="选择申请区域"
					placeholder-style="font-size:28rpx;color:#999999">
				<view class="" style="font-size: 0;margin-left: 10rpx;">
					<image style="width: 9rpx;height: 18rpx;" src="@/static/personal/right_jian.png" mode=""></image>
				</view>
			</view>
			<view class="flex align-center" style="padding: 26rpx 0;border-bottom: 2rpx solid #f4f4f4;">
				<view class="" style="width: 112rpx;margin-right: 28rpx;font-size: 28rpx;color: #333;">
					申请人
				</view>
				<input v-model="name" class="flex-1" type="text" placeholder="填写申请人"
					placeholder-style="font-size:28rpx;color:#333;">
			</view>
			<view class="flex align-center" style="padding: 26rpx 0;border-bottom: 2rpx solid #f4f4f4;">
				<view class="" style="width: 112rpx;margin-right: 28rpx;font-size: 28rpx;color: #333;">
					性别
				</view>
				<view class="flex-1 flex align-center">
					<view @click="selectSex(1)" class="flex align-center justify-center"
						style="margin-right: 28rpx;width: 46rpx;height: 44rpx;border: 2rpx solid #999999;border-radius: 8rpx;font-size: 22rpx;color: #999;"
						:style="sex==1?'background:#EBBE87;color:#000;':''">
						男
					</view>
					<view @click="selectSex(2)" class="flex align-center justify-center"
						style="width: 46rpx;height: 44rpx;border: 2rpx solid #999999;border-radius: 8rpx;font-size: 22rpx;color: #999;"
						:style="sex==2?'background:#EBBE87;color:#000;':''">
						女
					</view>
				</view>
			</view>
			<view class="flex align-center" style="padding: 26rpx 0;border-bottom: 2rpx solid #f4f4f4;">
				<view class="" style="width: 112rpx;margin-right: 28rpx;font-size: 28rpx;color: #333;">
					年龄
				</view>
				<input v-model="age" class="flex-1" type="text" placeholder="填写年龄"
					placeholder-style="font-size:28rpx;color:#999999">
			</view>
			<view @click="choose(1)" class="flex align-center"
				style="padding: 26rpx 0;border-bottom: 2rpx solid #f4f4f4;">
				<view class="" style="width: 112rpx;margin-right: 28rpx;font-size: 28rpx;color: #333;">
					学历
				</view>
				<input v-model="edu" class="flex-1" type="text" placeholder="填写学历"
					placeholder-style="font-size:28rpx;color:#999999">
			</view>
			<view class="flex align-center" style="padding: 26rpx 0;border-bottom: 2rpx solid #f4f4f4;">
				<view class="" style="width: 112rpx;margin-right: 28rpx;font-size: 28rpx;color: #333;">
					手机
				</view>
				<input v-model="phone" class="flex-1" type="text" placeholder="填写手机号"
					placeholder-style="font-size:28rpx;color:#999999">
			</view>
			<view @click="choose(2)" class="flex align-center"
				style="padding: 26rpx 0;border-bottom: 2rpx solid #f4f4f4;">
				<view class="" style="width: 112rpx;margin-right: 28rpx;font-size: 28rpx;color: #333;">
					所在地
				</view>
				<input disabled v-model="area1" class="flex-1" type="text" placeholder="选择所在地"
					placeholder-style="font-size:28rpx;color:#999999">
				<view class="" style="font-size: 0;margin-left: 10rpx;">
					<image style="width: 9rpx;height: 18rpx;" src="@/static/personal/right_jian.png" mode="">
					</image>
				</view>
			</view>
			<view class="flex align-start" style="padding: 26rpx 0;border-bottom: 2rpx solid #f4f4f4;">
				<view class="" style="width: 112rpx;margin-right: 28rpx;font-size: 28rpx;color: #333;">
					从业经历
				</view>
				<!-- <view class="flex-1"> -->
				<textarea class="flex-1" style="height: 164rpx;" v-model="experience" placeholder="填写从业经历"
					placeholder-style="font-size:28rpx;color:#999"></textarea>
				<!-- </view> -->
			</view>
			<view @click="submit" class="flex align-center justify-center"
				style="height: 100rpx;background: #C06F0C;border-radius: 50rpx;font-size: 32rpx;font-weight: 700;color: #fff;">
				提交
			</view>
		</view>
		<!-- 选择地址 -->
		<template v-if="showSelectAddress">
			<wanl-address ref='wanlAddress' @selectAddress="successSelectAddress"></wanl-address>
		</template>
		<!-- 申请成功弹窗 -->
		<uni-popup ref="popup" type="center" backgroundColor="transparent">
			<view class="" style="border-radius: 32rpx;overflow: hidden;width: 552rpx;background: #fff;">
				<view class="" style="font-size: 30rpx;line-height: 50rpx;padding: 78rpx 32rpx 70rpx 32rpx;">
					提交成功，请保持电话畅通，平台将在48小时内与您联系（休息日除外）
				</view>
				<view @click="know" class="flex align-center justify-center"
					style="height: 100rpx;background: #EBBE87;font-size: 32rpx;color: #844902;font-weight: 700;">
					我知道了
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import wanlAddress from '@/components/wanl-address.vue'
	export default {
		components: {
			wanlAddress
		},
		data() {
			return {
				navBarInfo: {},
				chooseType: 0,
				area: '', //申请区域
				areaCode:'',
				name: '', //申请人
				sex: 1, //性别
				age: '', //年龄
				edu: '', //学历
				phone: '', //手机号
				area1: '', //所在地
				experience: '', //经历
				showSelectAddress:false,
			}
		},
		onLoad() {
			this.navBarInfo = this.$navBarInfo;
		},
		methods: {
			goBack(){
				uni.navigateBack({
					delta:1,
				})
			},
			choose(e) {
				this.chooseType = e;
				this.showSelectAddress = true;
				setTimeout(()=>{
					switch (e) {
						case 0: {
							//申领区域
							this.$refs.wanlAddress.show(true);
							break;
						}
						case 1: {
							//学历
							break;
						}
						case 2: {
							//所在地
							this.$refs.wanlAddress.show()
							break;
						}
					}
				},200)
			},
			successSelectAddress(e) {
				if (this.chooseType == 0) {
					// 申请区域
					this.area = e.province + '/' + e.city;
				} else if (this.chooseType == 1) {

				} else if (this.chooseType == 2) {
					//所在地
					this.area1 = e.province + '/' + e.city + '/' +e.district;
				}
				setTimeout(()=>{
					this.showSelectAddress = false;
				},200)
			},
			selectSex(e) {
				this.sex = e;
			},
			submit() {
				if(this.area==''){
					uni.showToast({
						title:'请选择申请区域',
						icon:'none'
					})
					return;
				}
				if(this.name==''){
					uni.showToast({
						title:'请填写申请人',
						icon:'none'
					})
					return;
				}
				if(this.age==''){
					uni.showToast({
						title:'请填写年龄',
						icon:'none'
					})
					return;
				}
				if(this.edu==''){
					uni.showToast({
						title:'请填写学历',
						icon:'none'
					})
					return;
				}
				if(this.phone==''){
					uni.showToast({
						title:'请填写手机号',
						icon:'none'
					})
					return;
				}
				if(this.area1==''){
					uni.showToast({
						title:'请填写所在地',
						icon:'none'
					})
					return;
				}
				if(this.experience==''){
					uni.showToast({
						title:'请填写从业经历',
						icon:'none'
					})
					return;
				}
				let data = {
					city:this.area,	
					username:this.name,
					sex:this.sex,
					age:this.age,	
					education:this.edu,	
					mobile:this.phone,	
					in_city:this.area1,
					content:this.experience,
					user_id:uni.getStorageSync('userInfo').id,
				}
				this.$request({
					url: 'agent/agent_add',
					data:data,
				}).then(res => {
					if(res.data.code==1){
						this.$refs.popup.open();
					}else{
						uni.showToast({
							title:res.data.msg,
							icon:'none'
						})
					}
				})
				
			},
			know() {
				uni.navigateBack({
					delta: 2
				})
				this.$refs.popup.close();
			}
		}
	}
</script>

<style scoped lang="scss">
	.placeholderClass {
		font-size: 28rpx;
		color: #999999;
	}

	.nav-icon {
		width: 36rpx;
		height: 36rpx;
		background: url() no-repeat center;
		background-size: 100%;
		margin-left: 32rpx;
	}
</style>